"use client"

import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import { useState } from "react"
import PhoneticSymbolSheet from "./PhoneticSymbolSheet"

// 音标数据
const PHONETIC_DATA = [
    { symbol: "ab-", count: 125, meaning: "分离；相反" },
    { symbol: "re-", count: 125, meaning: "再次；重新" },
    { symbol: "un-", count: 98, meaning: "不；非；取消" },
    { symbol: "in-", count: 87, meaning: "不；进入" },
    { symbol: "dis-", count: 76, meaning: "不；除去；分开" },
    { symbol: "en-", count: 65, meaning: "使...；进入" },
    { symbol: "pre-", count: 54, meaning: "在...之前；预先" },
    { symbol: "pro-", count: 48, meaning: "向前；支持" },
    { symbol: "de-", count: 43, meaning: "除去；向下" },
    { symbol: "mis-", count: 39, meaning: "错误；不良" },
    { symbol: "co-", count: 37, meaning: "共同；一起" },
    { symbol: "anti-", count: 35, meaning: "反对；防止" },
    { symbol: "inter-", count: 33, meaning: "在...之间；相互" },
    { symbol: "over-", count: 31, meaning: "过度；超过" },
    { symbol: "sub-", count: 29, meaning: "在...之下；次要的" },
]

export default function PopularityTab() {
    const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null)
    const [selectedSymbolData, setSelectedSymbolData] = useState<any>(null)

    const handleSymbolPress = (symbol: string) => {
        setSelectedSymbol(symbol)
        const symbolData = PHONETIC_DATA.find((s) => s.symbol === symbol)
        setSelectedSymbolData(symbolData)
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
            <View style={styles.grid}>
                {PHONETIC_DATA.map((item) => (
                    <TouchableOpacity
                        key={item.symbol}
                        style={styles.item}
                        onPress={() => handleSymbolPress(item.symbol)}
                        activeOpacity={0.7}
                    >
                        <View style={styles.itemContent}>
                            <View style={styles.topRow}>
                                <Text style={styles.symbol}>{item.symbol}</Text>
                                <View style={styles.countBadge}>
                                    <Text style={styles.countText}>{item.count}</Text>
                                </View>
                            </View>
                            {/* <Text style={styles.meaning}>{item.meaning}</Text> */}
                        </View>
                    </TouchableOpacity>
                ))}
            </View>

            <PhoneticSymbolSheet
                visible={!!selectedSymbol}
                onClose={() => setSelectedSymbol(null)}
                symbol={selectedSymbol || ""}
                type="prefix"
                symbolData={selectedSymbolData}
            />
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    content: {
        padding: theme.spacing.lg,
    },
    grid: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.md,
    },
    item: {
        width: "31%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.md,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    itemContent: {
        flex: 1,
    },
    topRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 4,
    },
    countBadge: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.small,
        paddingHorizontal: 6,
        paddingVertical: 2,
    },
    countText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    symbol: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    count: {
        fontSize: theme.fontSize.md,
        color: '#ccc',
        fontWeight: theme.fontWeight.medium,
    },
    meaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
})

